<template>
  <div id="systemMessagePage">
    <!-- 使用麵包屑組件 -->
    <BreadcrumbComponent :breadcrumbItems="breadcrumbItems" />
    <TableFilter :config="filterConfig" @search="handleSearch" />

    <div class="data-box">
      <a-table
        :columns="columns"
        :data-source="tableData"
        :pagination="pagination"
        :loading="loading"
      >
        <!-- 表格頭部 -->
        <template #headerCell="{ column }">
          <!-- 根據表頭字段進行表頭修飾 -->
        </template>

        <!-- 表格內容 -->
        <template #bodyCell="{ column, record }">
          <!-- 根據不同的列顯示不同的內容修飾 -->
          <template v-if="column.dataIndex === 'menu'">
            <span v-if="record.menu == 'Doctor'">基礎數據-醫師管理</span>
            <span v-else-if="record.menu == 'Promotion'"
              >診金規則-診金推廣活動</span
            >
            <span v-else-if="record.menu == 'ConsultPlan'"
              >診金規則-診金分成方案</span
            >
            <span v-else-if="record.menu == 'CustomConsultType'"
              >診金規則-自定義診金類型</span
            >
            <span v-else-if="record.menu == 'ReductionPlan'"
              >診金規則-減免方案</span
            >
            <span v-else-if="record.menu == 'SpecifyService'"
              >診金規則-指定服務</span
            >
            <span v-else-if="record.menu == 'AdditionalShareRule'"
              >分成規則-附加項目分成</span
            >
            <span v-else-if="record.menu == 'RegularShareRule'"
              >分成規則-常規銷售分成</span
            >
            <span v-else-if="record.menu == 'ExtraShareRule'"
              >分成規則-附加推廣分成</span
            >
            <span v-else-if="record.menu == 'BonusSetting'"
              >獎金相關-獎金設置</span
            >
            <span v-else-if="record.menu == 'User'">系統管理-用戶列表</span>
            <span v-else-if="record.menu == 'Role'">系統管理-角色列表</span>
            <span v-else>未知</span>
          </template>
          <template v-if="column.dataIndex === 'user'">
            {{ record.user?.username || "系統" }}
          </template>

          <template v-if="column.dataIndex === 'type'">
            <a-tag color="green" v-if="record.type == 'CREATE'"> 創建 </a-tag>
            <a-tag color="blue" v-else-if="record.type == 'UPDATE'">修改</a-tag>
            <a-tag color="red" v-else-if="record.type == 'DELETE'">刪除</a-tag>
            <a-tag v-else> 未知 </a-tag>
          </template>
          <template v-if="column.dataIndex === 'beforeChange'">
            <a-popover
              title="操作前數據"
              placement="right"
              trigger="click"
              v-if="record.beforeChange"
            >
              <template #content>
                <a-space direction="vertical">
                  <a-typography-text
                    code
                    v-for="(value, key) in record.beforeChange"
                  >
                    {{ key }}: {{ value ?? "null" }}
                  </a-typography-text>
                </a-space>
              </template>
              <a-button
                size="small"
                type="text"
                style="color: #b6a476; font-weight: bolder"
                >原數據</a-button
              >
            </a-popover>
          </template>
          <template v-if="column.dataIndex === 'afterChange'">
            <a-popover
              title="操作後數據"
              placement="right"
              trigger="click"
              v-if="record.afterChange"
            >
              <template #content>
                <a-space direction="vertical">
                  <a-typography-text
                    code
                    v-for="(value, key) in record.afterChange"
                  >
                    {{ key }}: {{ value }}
                  </a-typography-text>
                </a-space>
              </template>
              <a-button
                size="small"
                type="text"
                style="color: #1677b3; font-weight: bolder"
                >新數據</a-button
              >
            </a-popover>
          </template>

          <template v-if="column.dataIndex === 'createdAt'">
            {{ $formatDate(record.updatedAt) }}
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import BreadcrumbComponent from "@/components/BreadcrumbComponent.vue";
import TableFilter from "@/components/TableFilter.vue";
import { tableColumns, filterFields } from "@/models/operationLog";
import { createPagination } from "@/utils/pagination";
import { OperationLogApi } from "@/api";
import { useRouter } from "vue-router";
import { watchRouteQuery } from "@/utils/routeQueryWatcherUtil";

/*******定義參數部分*****************************/
const breadcrumbItems = [{ url: "", name: "操作記錄" }];
const columns = tableColumns;
const filterConfig = filterFields;
const router = useRouter();

const loading = ref(false);

// 分頁配置
const pagination = createPagination();

// 數據
const tableData = ref([]);
/*******數據獲取與初始化部分*****************************/

// 獲取數據
const fetchData = async (params?: any) => {
  try {
    loading.value = true; // 開始加載
    const {
      data: { list, page, limit, total },
    } = await OperationLogApi.getList(params);
    tableData.value = list || [];
    pagination.updatePagination(page, limit, total);
  } catch (error) {
    console.error("獲取系統消息列表失敗", error);
  } finally {
    loading.value = false; // 加載完成
  }
};

// 監聽路由變化,更新列表數據
watchRouteQuery(fetchData);

/*******操作方法部分部分*****************************/
// 搜索
const handleSearch = (params: any) => {
  router.push({ query: params });
};
</script>

<style scoped></style>
